<template>
	<view class="container">

		<data-list ref="list" :loading="isLoad" :enableBackToTop="true" @load="pageGoods" @refresh="pageRefresh">
			<view class="navlinear">
				<view class="top">
					<text class="">宠物便捷服务中心</text>
				</view>
				<view class="search" @click="searchs()">
					<uni-search-bar placeholder="搜索商品" cancelButton="none" />
				</view>
				
				<view class="banner">
					<cf-banner :indicatorDots="false" :height="'130px'" :width="'100%'" :list="banner"
						@click="goodsDetailB">
					</cf-banner>
				</view>
			</view>

			<view class="gclass">
				<uni-grid :column="2" :show-border="false" :square="false">
					<uni-grid-item v-for="(item ,index) in classList" :index="index" :key="index">
						<view class="grid-item-box" @click="clickClass(item.id)">
							<image class="image" :src="item.icon" mode="aspectFill" />
							<text class="text">{{item.title}}</text>
							<!-- <view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view> -->
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<cf-goods :list="goodsList" @click="goodsDetail" @addCard="addCard"></cf-goods>
		</data-list>
		<!-- <cf-title :color="'#4095E5'"></cf-title> -->
		<!--<cf-goods :list="goodsPushList" v-if="goodsList.length>0" @click="goodsDetail" @addCard="addCard">
		</cf-goods>
 -->
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				banner: [
					{
						id: 1,
						title: '轮播图1',
						type:'image',
						url: '../../../../static/index/lunbo1.jpg'
					},
					{
						id: 2,
						title: '轮播图2',
						type:'image',
						url: '../../../../static/index/lunbo2.jpeg'
					},
					{
						id: 3,
						title: '轮播图3',
						type:'image',
						url: '../../../../static/index/lunbo3.jpeg'
					},
					{
						id: 4,
						title: '轮播图4',
						type:'image',
						url: '../../../../static/index/lunbo4.jpeg'
					}
				],
				classList: [
					{
						id: 1,
						title: '服务预约',
						icon: '../../static/index/subscibe.png'
					},
					{
						id: 2,
						title: '宠物物品商城',
						icon: '../../static/index/shop.jpeg'
					}
				],
				goodsList: [],
				isLoad: false
			}
		},
		onLoad() {
			// this.getGoods(2) //banner
			// this.getClass() //分类
			// this.getGoods() //普通商品
			// this.getGoods(1) //推荐商品
			// this.getCarCount()
		},
		onShow() {},
		onShareAppMessage(res) {
			return {
				title: '宠物便捷服务',
				path: 'pages/index/index',
			};
		},
		methods: {
			searchs() {
				uni.navigateTo({
					url: "/pagesOne/search/search"
				})
			},
			//获取购物车数量
			getCarCount() {
				if (uni.getStorageSync("token")) {
					this.apis.getCarCount().then(res => {
						console.log(res)
						uni.setTabBarBadge({
							index: 2,
							text: res + ''

						})
					})
				}
			},
			//获取分类列表前十位
			// getClass() {
			// 	this.apis.classList({}).then(res => {
			// 		this.classList = res.splice(0, 2)
			// 	})
			// },
			pageRefresh(data, callback) {
				this.goodsList = [];
				this.pageGoods(data, callback)
			},
			pageGoods(data, callback) {
				this.apis.goodsList({
					// page: data.page,
					// limit: data.size,
					pageNum: data.page,
					pageSize: data.size
					// type: 0
				}).then(res => {
					this.goodsList = [...this.goodsList, ...res.list || []];
					console.log("商品列表："+res)
					callback({
						list: this.goodsList,
						total: res.total || 0
					});
				})

			},
			//获取商品列表根据 商品类型
			// getGoods(type) {
			// 	this.apis.goodsList({
			// 		pageNume: 1,
			// 		pageSize: 25,
			// 		// type: type || 0
			// 	}).then(res => {
			// 		this.goodsList = res.list;
			// 		// if (type === 1) { //推荐
			// 		// 	this.goodsPushList = res.records
			// 		// } else if (type === 2) { //banner
			// 		// 	for (let data of res.records) {
			// 		// 		let obj = {};
			// 		// 		obj.title = data.title;
			// 		// 		obj.url = data.face
			// 		// 		// obj.poster=data.icon
			// 		// 		obj.type = (data.face.indexOf(".mp4") != -1) ? 'video' : 'image';
			// 		// 		obj.id = data.id
			// 		// 		this.banner.push(obj);
			// 		// 	}
			// 		// } else {
			// 		// 	console.log(res.records)
			// 		// 	this.goodsList = res.list;
			// 		// }

			// 	})
			// },
			//banner商品点击详情
			goodsDetailB(item) {
				this.goodsDetail(item.id)
			},
			//商品详情
			goodsDetail(id, e) {
				uni.navigateTo({
					url: '/pagesOne/goodsDetail/goodsDetail?id=' + id
				});
			},
			//加入购物车
			addCard(id) {
				this.apis.addCar({
					goodId: id,
					number: 1
				}).then(res => {
					// uni.setTabBarBadge({
					// 	index: 2,
					// 	text: res + ""
					// })
					uni.showToast({
						title: "成功",
						icon: 'none'
					})
					this.getCarCount()
				})
			},
			/**
			 * 点击分类
			 * @param {Object} e
			 */
			clickClass(e) {
				// let {
				// 	index
				// } = e.detail
				// this.classList[index].badge && this.classList[index].badge++
				console.log(e)
				if(e===1){
					uni.navigateTo({
						url: "/pagesOne/subscribe/subscribe"
					})
				}else if(e===2){
					uni.switchTab({
						url: "/pages/classs/classs"
					})
				}
				// uni.navigateTo({
				// 	url: "/pagesOne/searchList/searchList?classId=" + e
				// })
			},

		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 80px 25px 8px 25px;
		color: #ffffff;
		font-size: 18px;
		display: flex;
		flex-direction: column;
		letter-spacing: initial;
		font-weight: 600;
	}

	.search {
		// position: sticky;
		// top: 300px;
	}

	.pt {
		padding-top: 8px;
	}

	.uni-searchbar__box {
		justify-content: flex-start !important;
	}

	.uni-searchbar {
		padding-bottom: 0px !important;
		padding-top: 0px !important;
	}

	.ba {
		margin-top: 5px !important;
		margin-bottom: 5px !important;
	}

	.image {
		width: 137px;
		height: 70px;
		position: relative;
		border-radius: 15px;
		animation: myfirst 2s;
		/* Safari and Chrome */
		-webkit-animation: myfirst 2s;

	}

	.text {
		font-size: 20px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0px 5px 0px;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/*  #endif  */

	@keyframes myfirst {
		10% {
			left: 0px;
			top: 0px;
		}

		40% {
			left: 0px;
			top: -20px;
		}

		45% {
			left: 0px;
			top: 0px;
		}

		65% {
			left: 0px;
			top: -8px;
		}

		70% {
			left: 0px;
			top: 0px;
		}

		80% {
			left: 0px;
			top: -2px;
		}

		90% {
			left: 0px;
			top: 0px;
		}
	}

	@-webkit-keyframes myfirst {
		10% {
			left: 0px;
			top: 0px;
		}

		40% {
			left: 0px;
			top: -20px;
		}

		45% {
			left: 0px;
			top: 0px;
		}

		65% {
			left: 0px;
			top: -8px;
		}

		70% {
			left: 0px;
			top: 0px;
		}

		80% {
			left: 0px;
			top: -2px;
		}

		90% {
			left: 0px;
			top: 0px;
		}
	}
	
</style>
